<template>
  <div class="home-page">
    <!-- 账号、设备、围栏、区域数据展示 -->
        <show-data/>
        <div class="charts">
          <line-chart class="line-charts" width="100%" height="250px"/>
          <div class="two-charts">
            <div class="charts-item">
              <img class="title-img" src="../assets/img/标题-箭头左.png" >
              <p class="title-font">里程统计</p>
              <sector-graph class="round" height="250px" width="480px"/>
            </div>
            <div class="charts-item1">
              <img class="title-img" src="../assets/img/标题-箭头左.png" >
              <p class="title-font">文件信息</p>
              <my-bar-chart height="250px" width="480px"/>
            </div>
          </div>
        </div>
    <!-- tab及日期选择器 -->
        <evidence-panel/>
  </div>
</template>

<script>
// vue文件中引入echarts工具
import { GridComponent, DataZoomComponent } from 'echarts/components'
import { PieChart, BarChart } from 'echarts/charts'
import ShowData from '../../components/ShowData.vue'
import EvidencePanel from '../../components/EvidencePanel.vue'
import MyBarChart from '../../components/echarts/BarChart.vue'
import SectorGraph from '../../components/echarts/SectorGraph.vue'
import LineChart from '../../components/echarts/PolyLine.vue'

const echarts = require('echarts/lib/echarts')
require('echarts/lib/chart/line')
// 以下的组件按需引入
require('echarts/lib/component/tooltip')
require('echarts/lib/component/title')
require('echarts/lib/component/legend')
echarts.use([BarChart])
echarts.use([GridComponent])
echarts.use([PieChart])
echarts.use([DataZoomComponent])
export default {
  components: {
    EvidencePanel,
    ShowData,
    MyBarChart,
    SectorGraph,
    LineChart
  },
  data () {
    return {
    }
  },
  mounted () {
  },
  methods: {
  }
}
</script>

<style scoped>
.home-page{
  overflow: auto;
  display: flex;
  flex-direction: column;
  position: relative;
}
.home-page::-webkit-scrollbar{
  display: none;
}
.line-charts {
  margin-top: 10px;
  overflow: hidden;
}
.round{
  margin-top: 30px;
  overflow: hidden;
  justify-content: space-around;
}
.charts-item{
  background-image: url(../assets/img/标题-线.png);
  background-size: 100% 100%;
  background-repeat: no-repeat;
  line-height: 10px;
  width: 290px;
  height: 6px;
  margin-left: 20px;
  margin-top: 30px;
}
.charts-item1{
  background-image: url(../assets/img/标题-线.png);
  background-size: 100% 100%;
  background-repeat: no-repeat;
  line-height: 10px;
  width: 290px;
  height: 6px;
  margin-left: 520px;
}
.title-img{
  margin-top: -15px;
  margin-bottom: 20px;
}
.title-font{
  margin-top: -35px;
  margin-left: 20px;
  margin-bottom: -5px;
  font-size: 8px;
  color: aliceblue;
}
.charts{
  width: 100%;
  height: 620px;
  display: inline-block;
}
.two-charts{
  display: flex;
  flex-direction: column;
}
</style>
